// 文章列表页面JS

document.addEventListener('DOMContentLoaded', function() {
    // 初始化各项功能
    initBackButton();
    initSearchButton();
    initTabSwitching();
    initLoadMoreButton();
    
    // 初始化底部导航
    initTabBar();
    
    // 处理图片加载错误
    handleImageErrors();
});

// 返回按钮功能
function initBackButton() {
    const backBtn = document.querySelector('.back-btn');
    
    if (backBtn) {
        backBtn.addEventListener('click', function() {
            // 先检查是否有历史记录
            if (window.history.length > 1) {
                window.history.back();
            } else {
                // 如果没有历史记录，返回发现页
                window.location.href = 'discover.html';
            }
        });
    }
}

// 搜索按钮功能
function initSearchButton() {
    const searchBtn = document.querySelector('.action-btns i.bi-search');
    
    if (searchBtn) {
        searchBtn.addEventListener('click', function() {
            // 这里可以添加搜索功能，如显示搜索框或跳转到搜索页面
            showToast('搜索功能开发中，敬请期待');
        });
    }
}

// 标签切换功能
function initTabSwitching() {
    const tabs = document.querySelectorAll('.category-tabs .tab');
    
    tabs.forEach(tab => {
        tab.addEventListener('click', function() {
            // 如果已经是激活状态，不做处理
            if (this.classList.contains('active')) {
                return;
            }
            
            // 移除所有标签的active类
            tabs.forEach(t => t.classList.remove('active'));
            
            // 为当前点击的标签添加active类
            this.classList.add('active');
            
            // 记录当前选中的分类
            const category = this.textContent.trim();
            console.log(`切换到分类: ${category}`);
            
            // 模拟加载内容的动画
            simulateLoading();
        });
    });
}

// 加载更多按钮功能
function initLoadMoreButton() {
    const loadMoreBtn = document.querySelector('.load-more-btn');
    
    if (loadMoreBtn) {
        loadMoreBtn.addEventListener('click', function() {
            // 切换按钮状态
            this.textContent = '加载中...';
            this.disabled = true;
            
            // 模拟加载更多内容
            setTimeout(() => {
                // 加载完成后，恢复按钮状态
                this.textContent = '加载更多';
                this.disabled = false;
                
                // 添加新的文章项
                appendNewArticles();
            }, 1500);
        });
    }
}

// 底部导航功能
function initTabBar() {
    const tabItems = document.querySelectorAll('.tab-bar .tab-item');
    
    tabItems.forEach((tab, index) => {
        tab.addEventListener('click', function() {
            // 如果不是当前标签，才进行跳转
            if (!this.classList.contains('active')) {
                switch(index) {
                    case 0: // 首页
                        window.location.href = '../index.html';
                        break;
                    case 1: // 发现
                        window.location.href = 'discover.html';
                        break;
                    case 2: // 经纪人
                        window.location.href = 'agents.html';
                        break;
                    case 3: // 我的
                        window.location.href = 'profile.html';
                        break;
                }
            }
        });
    });
}

// 模拟加载新内容
function simulateLoading() {
    // 获取文章列表容器
    const articleList = document.querySelector('.article-list');
    
    // 显示加载动画
    articleList.style.opacity = '0.5';
    showToast('加载中...');
    
    // 延迟一下，模拟网络请求
    setTimeout(() => {
        // 恢复列表显示
        articleList.style.opacity = '1';
        
        // 模拟内容替换，这里只是重新排序已有的文章
        const articleItems = Array.from(articleList.querySelectorAll('.article-item'));
        articleList.innerHTML = '';
        
        // 随机排序并重新添加
        articleItems.sort(() => Math.random() - 0.5).forEach(item => {
            articleList.appendChild(item);
        });
    }, 800);
}

// 添加新的文章
function appendNewArticles() {
    // 获取文章列表容器
    const articleList = document.querySelector('.article-list');
    
    // 创建新的文章项
    const newArticles = [
        {
            img: '../img/article5.jpg',
            title: '远程工作新趋势：后疫情时代的职场变革',
            desc: '疫情加速了远程工作的普及，如何适应这种新型工作模式并在其中脱颖而出？',
            author: '远程工作指南',
            avatar: '../img/avatar8.jpg',
            time: '2周前'
        },
        {
            img: '../img/article6.jpg',
            title: '跨境电商人才需求分析与能力构建',
            desc: '随着全球贸易数字化，跨境电商成为新热点，该领域需要哪些复合型人才？',
            author: '国际贸易专家',
            avatar: '../img/avatar9.jpg',
            time: '3周前'
        }
    ];
    
    // 添加新文章到列表中
    newArticles.forEach(article => {
        const articleItem = document.createElement('div');
        articleItem.className = 'article-item';
        articleItem.setAttribute('onclick', "window.location.href='article-details.html'");
        
        articleItem.innerHTML = `
            <div class="article-img">
                <img src="${article.img}" alt="${article.title}">
            </div>
            <div class="article-content">
                <h3>${article.title}</h3>
                <p class="article-desc">${article.desc}</p>
                <div class="article-meta">
                    <div class="author-info">
                        <img src="${article.avatar}" alt="作者头像" class="author-avatar">
                        <span>${article.author}</span>
                    </div>
                    <span class="publish-time">${article.time}</span>
                </div>
            </div>
        `;
        
        articleList.appendChild(articleItem);
    });
    
    // 处理新添加的图片
    handleImageErrors();
    
    // 如果已经加载了3次，隐藏加载更多按钮
    const loadMoreBtn = document.querySelector('.load-more-btn');
    const loadCount = (loadMoreBtn.dataset.loadCount || 0) * 1 + 1;
    loadMoreBtn.dataset.loadCount = loadCount;
    
    if (loadCount >= 3) {
        loadMoreBtn.textContent = '已加载全部内容';
        loadMoreBtn.disabled = true;
        loadMoreBtn.style.opacity = '0.5';
    }
    
    // 显示加载成功提示
    showToast('加载成功');
}

// 显示提示消息
function showToast(message) {
    // 检查是否已有toast，有则移除
    const existingToast = document.querySelector('.toast-message');
    if (existingToast) {
        document.body.removeChild(existingToast);
    }
    
    // 创建提示框元素
    const toast = document.createElement('div');
    toast.className = 'toast-message';
    toast.textContent = message;
    
    // 设置提示框样式（如果没有全局样式）
    if (!document.querySelector('style[data-toast]')) {
        toast.style.position = 'fixed';
        toast.style.top = '60px';
        toast.style.left = '50%';
        toast.style.transform = 'translateX(-50%)';
        toast.style.padding = '8px 16px';
        toast.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
        toast.style.color = '#fff';
        toast.style.borderRadius = '4px';
        toast.style.zIndex = '1000';
        toast.style.opacity = '0';
        toast.style.transition = 'opacity 0.3s ease';
    }
    
    // 将提示框添加到body
    document.body.appendChild(toast);
    
    // 显示提示框
    setTimeout(() => {
        toast.style.opacity = '1';
    }, 10);
    
    // 2秒后隐藏并移除提示框
    setTimeout(() => {
        toast.style.opacity = '0';
        setTimeout(() => {
            if (document.body.contains(toast)) {
                document.body.removeChild(toast);
            }
        }, 300);
    }, 2000);
}

// 图片错误处理
function handleImageErrors() {
    const images = document.querySelectorAll('img');

    images.forEach(img => {
        img.addEventListener('error', function() {
            let imageType = 'generic';
            
            // 根据图片所在容器类型设置不同的替代图
            if (this.classList.contains('featured-img')) {
                imageType = 'featured';
            } else if (this.classList.contains('author-avatar')) {
                imageType = 'avatar';
            } else if (this.closest('.article-img')) {
                imageType = 'article';
            }
            
            // 生成随机ID以获取不同图片
            const randomId = Math.floor(Math.random() * 1000);
            
            // 根据图片类型设置替代图
            switch(imageType) {
                case 'featured':
                    this.src = `https://source.unsplash.com/random/800x400/?career,technology&sig=${randomId}`;
                    break;
                case 'avatar':
                    this.src = `https://i.pravatar.cc/150?img=${randomId % 70}`;
                    // 确保头像是圆形
                    this.style.objectFit = 'cover';
                    this.style.borderRadius = '50%';
                    break;
                case 'article':
                    this.src = `https://source.unsplash.com/random/400x300/?career,business&sig=${randomId}`;
                    break;
                default:
                    this.src = `https://source.unsplash.com/random/300x200/?business&sig=${randomId}`;
            }
            
            // 设置加载模式为立即加载
            this.loading = 'eager';
        });
    });
} 